<template lang="pug">
  FullScreenDialog(ref="dialog")
    template(v-slot:activator='{ on }')
      v-btn(text v-on="on") 新增客户
    template(v-slot:header)
      v-toolbar(dark, color='primary')
        v-btn(icon, dark, @click='cancel')
          v-icon close
        v-toolbar-title {{ title }}
        v-spacer
        v-toolbar-items
    template(v-slot:default)
      v-container
        v-card
          v-toolbar(color="purple darken-4" dark dense)
            v-toolbar-title 基本信息
            v-spacer
            v-toolbar-items
              v-btn(text @click="reset") 重置
              v-btn(text @click="save") 保存
          v-card-text
            v-form(ref="form")
              v-container
                v-row
                  v-col(cols="12")
                    v-text-field(:label="CustomerLang['name']" v-model="customer.name" :rules="[rules.required]" :error-messages="errorMsg")
                  v-col(cols="12")
                    v-text-field(:label="CustomerLang['address']" v-model="customer.address" :rules="[rules.required]")
                  v-col(cols="12")
                    v-text-field(:label="CustomerLang['tel']" v-model="customer.tel")
                  v-col(cols="12")
                    v-text-field(:label="CustomerLang['email']" v-model="customer.email")
                  v-col(cols="12")
                    v-text-field(:label="CustomerLang['contact_name']" v-model="customer.contact_name" :rules="[rules.required]")
                  v-col(cols="12")
                    v-text-field(:label="CustomerLang['contact_tel']" v-model="customer.contact_tel" :rules="[rules.required]")
                  v-col(cols="12")
                    v-text-field(:label="CustomerLang['contact_email']" v-model="customer.contact_email" :rules="[rules.required]")
                  v-col(cols="12")
                    v-text-field(:label="CustomerLang['identify_code']" v-model="customer.identify_code")

</template>
<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import RulesMixin from '@/components/mixins/FormValidateRulesMixin'
  import FullScreenDetailsMixin from '@/components/mixins/FullScreenDetailsMixin'
  import FullScreenDialog from '@/components/widgets/dialog/FullScreenDialog'
  import {Customer, CustomerLang} from '@/store/modules/types/Customer'
  import {mapActions} from 'vuex'
  import {AxiosResponse} from 'axios'

  export default (Vue as VueConstructor<Vue & {
    buildEmptyCustomer: () => Customer
  }>).extend({
    name: 'customer_add_dialog',
    mixins: [RulesMixin, FullScreenDetailsMixin],
    methods: {
      ...mapActions('customer', { createCustomer: 'add' }),
      buildEmptyCustomer(): Customer {
        return {
          name: null,
          address: null,
          tel: null,
          email: null,
          contact_name: null,
          contact_tel: null,
          contact_email: null,
          identify_code: null
        }
      },
      save() {
        if (this.$refs.form.validate()) {
          this.$loading('保存中...')
          this.createCustomer(this.customer).then((response: AxiosResponse) => {
            if (!response.data.error) {
              this.$emit('refresh')
              this.reset()
              this.$refs.dialog.toggle()
            }else {
              this.errorMsg = response.data.message
              this.$msgBox("保存失败 " + response.data.message)
            }
          }).finally(this.$loading.close)
        }
      },
      reset() {
        this.customer = Object.assign({}, this.buildEmptyCustomer())
        this.$refs.form.reset()
        this.errorMsg = ''
      }
    },
    components: { FullScreenDialog },
    computed: {
      needRefresh(): boolean {
        return false
      }
    },
    data() {
      let emptyCustomer = this.buildEmptyCustomer()
      return {
        active: false,
        dirty: false,
        title: '新增客户信息',
        CustomerLang,
        customer: emptyCustomer,
        errorMsg: ''
      }
    }
  })
</script>